<template>
  <div>
    <navBar :config="navBarConfig" />
    <div class="list content_management">
      <div class="select_management">
        <div class="title">时间范围：</div>
        <div class="content">
          <el-date-picker v-model="queryParams.searchTimes" type="daterange" align="right" unlink-panels
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"
            value-format="yyyy-MM-dd" @change="getList()">
          </el-date-picker>
        </div>
        <!-- <template v-if="role === '超级管理员' || role === '管理员'">
          <div class="title">服务器：</div>
          <div class="content">
            <el-select v-model="queryParams.serverCode" clearable @change="getList()">
              <el-option v-for="item in serverList" :key="item.ip" :label="item.name" :value="item.ip">
              </el-option>
            </el-select>
          </div>
        </template> -->
        <div class="title">关键字查询：</div>
        <div class="content">
          <el-input v-model="queryParams.keyword" placeholder="请输入搜索内容" @input="querytaskName" clearable></el-input>
        </div>
        <!-- <div class="title">
          <el-button type="primary" icon="el-icon-plus" @click="addAndEdit(null)" v-if="role === '超级管理员' || role === '管理员'">新增</el-button>
        </div> -->
        <!-- <div class="title">
          <el-button type="warning" icon="el-icon-download">导出</el-button>
        </div> -->
      </div>
      <div class="table_management">
        <el-table :data="tableData" style="width: 100%" border stripe :header-cell-style="getRowClass"
          :max-height="maxHeight" v-loading="loading" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center">
          </el-table-column>
          <el-table-column label="项目编号" align="left">
            <template slot-scope="scope">
              <div class="project_num" @click="viewProject(scope.row)">
                {{ scope.row.projectNum }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="项目路径" prop="projectPath" align="center">
          </el-table-column>
          <!-- <el-table-column label="开题单号" prop="pageCode" align="center">
          </el-table-column> -->
          <el-table-column label="所属类别" align="center">
            <template slot-scope="scope">
              {{ productInquire(scope.row.productId) }}
            </template>
          </el-table-column>
          <el-table-column label="创建日期" prop="updateTime" align="center">
          </el-table-column>
          <!-- <el-table-column label="操作" align="center" min-width="120px" v-if="role === '超级管理员' || role === '管理员'">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                <el-button icon="el-icon-edit" size="mini" @click="addAndEdit(scope.row)"></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除" placement="top">
                <el-button icon="el-icon-delete" type="danger" size="mini" @click="delObject(scope.row.id)"></el-button>
              </el-tooltip>
            </template>
          </el-table-column> -->
        </el-table>
        <!-- 分页器 -->
        <div class="createDate">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="queryParams.pageNo" :page-sizes="[10, 20, 30, 40]" :page-size="queryParams.pageSize"
            layout="->,total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </div>
    </div>

    <el-dialog :title="title" :visible.sync="itemVisible" width="460px" :close-on-click-modal="false"
      :close-on-press-escape="false" v-dialogDrag>
      <el-form ref="form" :model="form" label-width="120px" label-position="left">
        <el-form-item label="所属用户">
          <el-select v-model="form.belongUserId" style="width: 288px;">
            <el-option :value="item.id" :label="item.userName" v-for="item in userList" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="页面编码">
          <el-select v-model="form.productId" style="width: 288px;">
            <el-option :value="item.id" :label="item.name" v-for="item in productList" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目编号">
          <el-input v-model="form.projectNum" clearable></el-input>
        </el-form-item>
        <el-form-item label="项目路径">
          <el-input v-model="form.projectPath" clearable></el-input>
        </el-form-item>
        <el-form-item label="服务器代码">
          <el-select v-model="form.serverCode" style="width: 288px;">
            <el-option :value="item.ip" :label="item.name" v-for="item in serverList" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitObject">确 定</el-button>
        <el-button @click="itemVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { throttle } from '@/utils';
import {
  pageCloudAnalysisProjectRequest,
  addCloudAnalysisProjectRequest,
  modifyCloudAnalysisProjectRequest,
  deleteCloudAnalysisProjectRequest,
  getProductSelectRequest,
  getServerSelectRequest,
  getUserSelectRequest
} from '@/api/cloudAnalysis'
export default {
  name: 'Analysis',
  data() {
    return {
      role: JSON.parse(localStorage.getItem('userInfo')).role,
      navBarConfig: {
        leftTool: true,
        rightTool: false,
      },
      itemVisible: false,
      selectList: [],
      loading: false,
      maxHeight: '600px',
      total: 0,
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        searchTimes: null,
        keyword: null,
        serverCode: null,
      },
      form: {
        id: null,
        belongUserId: null,
        productId: null,
        projectNum: null,
        projectPath: null,
        serverCode: null,
      },
      tableData: [],
      title: '新增项目',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      productList: [],
      serverList: [],
      userList: [],
      api: null,
    }
  },
  created() {
    this.init()
    this.getList()
    setTimeout(() => {

      const event = document.createEvent('HTMLEvents');

      event.initEvent('resize', true, true);

      event.eventType = 'message'
      window.dispatchEvent(event);

    }, 100)
    window.addEventListener('resize', this.windowResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.windowResize)
  },
  methods: {
    async init() {
      const res = await getProductSelectRequest()
      this.productList = res.data

      const res2 = await getServerSelectRequest()
      this.serverList = res2.data

      const res3 = await getUserSelectRequest()
      this.userList = res3.data
    },
    async getList() {
      const res = await pageCloudAnalysisProjectRequest(this.queryParams)
      if (res.code !== 200) return this.$message.error(res.message)
      this.tableData = res.data.list
      this.total = res.data.total
    },
    //筛选
    querytaskName: throttle(function () {
      this.getList(this.queryParams)
    }, 500),
    //修改页数
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.getList()
    },
    //修改页码
    handleCurrentChange(val) {
      this.queryParams.pageNo = val
      this.getList()
    },
    handleSelectionChange(value) {
      this.selectList = value
    },
    windowResize() {
      let val = document.body.clientHeight
      this.maxHeight = (val - 350) + 'px'
    },
    //table 自定义表头
    getRowClass({ rowIndex, columnIndex }) {
      if (rowIndex == 0) {
        return "background:#eee;font-weight: 400;color:#666;text-align:center";
      }
    },
    addAndEdit(row) {
      this.title = row ? '编辑项目' : '新增项目'
      if (row) {
        this.form = row
        this.api = modifyCloudAnalysisProjectRequest
      } else {
        this.api = addCloudAnalysisProjectRequest
        this.form = {
          id: null,
          belongUserId: null,
          productId: null,
          projectNum: null,
          projectPath: null,
          serverCode: null,
        }
      }
      this.itemVisible = true
    },
    //删除
    async delObject(id) {
      this.$confirm('该操作将删除此项目，是否继续？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
        beforeClose: async (action, instance, done) => {
          if (action === 'confirm') {
            const res = await deleteCloudAnalysisProjectRequest(id)
            if (res.code !== 200) return this.$message.error(res.message)
            this.$message({
              type: 'success', message: res.message
            })
            this.getList()
          } else if (action === 'cancel') {
            this.$message({
              message: '取消操作',
            })
          }
          done();
        }
      }).catch(() => { })
    },
    //查看项目
    viewProject(row) {
      this.$skipRouter(row.productId, row.firstMenuAddress)
    },
    async submitObject() {
      const res = await this.api(this.form)
      console.log(res, 'res');
      this.itemVisible = false
      this.getList()
    },
    productInquire(productId) {
      const item = this.productList.find(i => i.id === productId)
      if (item) {
        return item.name
      } else {
        return '-'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";

.list {
  box-shadow: 1px 2px 5px 2px #ccc;
  border-radius: 6px;
  padding: 0 20px;
  height: calc(100vh - 160px);
  overflow-y: auto;

}

.content_management {
  padding: 25px;

  .table_management {
    border-radius: 6px;

    .createDate {
      padding-top: 15px;
    }
  }

  .select_management {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    line-height: 50px;
    margin-bottom: 15px;

    ::v-deep .el-input__inner {
      height: 35px;
      line-height: 35px;
      border-radius: 4px;
    }

    .title {
      margin-left: 10px;
    }

  }
}

::v-deep .el-input__inner {
  height: 35px;
  line-height: 35px;
  border-radius: 4px;
}

::v-deep .el-dialog__body {
  padding: 25px 25px 0;
}

::v-deep .el-dialog__header {
  text-align: center;
  font-weight: 700;
  border-bottom: 1px solid #ccc;
}

.project_num {
  cursor: pointer;
  color: #1d6af2;
}
</style>

